const path = require("path");
const resolve = (dir) => path.join(__dirname, dir);

const CompressionWebpackPlugin = require("compression-webpack-plugin"); // 开启gzip压缩(可选)
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i; // 开启gzip压缩(可选)

const BundleAnalyzerPlugin =
  require("webpack-bundle-analyzer").BundleAnalyzerPlugin; // 打包分析，(可选)

const IS_PRODUCTION = ["production", "prod"].includes(process.env.NODE_ENV); //判断是否是生产环境
/** 正式配置项，以下参数 都是可选**/
module.exports = {
  assetsDir: "static", // 相对于outputDir的静态资源(js、css、img、fonts)目录
  lintOnSave: false, // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码，false不需要
  runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本
  productionSourceMap: !IS_PRODUCTION, // 生产环境的 source map,
  parallel: require("os").cpus().length > 1,
  pwa: {}, // 向 PWA 插件传递选项。
  pages: {
    // 登录页
    login: {
      entry: "src/pages/login/main.ts",
      template: "public/login.html",
      filename: "login.html",
      title: " ",
    },
    // sa-data
    index: {
      entry: "src/main.ts",
      template: "public/index.html",
      filename: "index.html",
      title: " ",
    },
  },
  chainWebpack: (config) => {
    config.resolve.symlinks(true); // 修复热更新失效
    // 如果使用多页面打包，使用vue inspect --plugins查看html是否在结果数组中
    // config.plugin("html").tap((args) => {
    //   // 修复 Lazy loading routes Error
    //   args[0].chunksSortMode = "none";
    //   return args;
    // });
    const oneOfsMap = config.module.rule("less").oneOfs.store;
    // 解决less变量在组件中使用不生效的问题
    oneOfsMap.forEach((item) => {
      item
        .use("style-resources-loader")
        .loader("style-resources-loader")
        .options({
          // or an array : ["./path/to/vars.less", "./path/to/mixins.less"] 这里的路径不能使用@，否则会报错
          patterns: "./src/style/variable.less",
        })
        .end();
    });
    config.resolve.alias // 添加别名
      .set("@", resolve("./src"))
      .set("@assets", resolve("./src/assets"))
      .set("@components", resolve("./src/components"))
      .set("@views", resolve("./src/views"))
      .set("@store", resolve("./src/store"))
      .set("@utils", resolve("./src/utils"))
      .set("@style", resolve("./src/style"))
      .set("@ui", resolve("./src/ui-library"));
    // 压缩图片
    config.module
      .rule("images")
      .use("image-webpack-loader")
      .loader("image-webpack-loader")
      .options({ bypassOnDebug: true })
      .end();
    // 打包分析, 打包之后自动生成一个名叫report.html文件(可忽视)
    if (IS_PRODUCTION) {
      config.plugin("webpack-report").use(BundleAnalyzerPlugin, [
        {
          analyzerMode: "static",
        },
      ]);
    }
  },
  //webpack的配置项
  configureWebpack: (config) => {
    // 开启 gzip 压缩
    const plugins = [];
    if (IS_PRODUCTION) {
      plugins.push(
        new CompressionWebpackPlugin({
          filename: "[path].gz[query]",
          algorithm: "gzip",
          test: productionGzipExtensions,
          threshold: 10240,
          minRatio: 0.8,
        })
      );
    }
    config.plugins = [...config.plugins, ...plugins];
  },

  css: {
    extract: IS_PRODUCTION,
    loaderOptions: {
      // 给 less-loader 传递 Less.js 相关选项
      less: {
        modifyVars: {
          /* less 变量覆盖，用于自定义 ant design 主题 */
          "primary-color": "#10c1b0",
          "link-color": "#10c1b0",
          "border-radius-base": "4px",
          "heading-color": "#dfeef3",
          "text-color": "#636363",
          "box-shadow-base": "0px 3px 21px 0px rgba(0, 0, 0, 0.15)",
        },
        javascriptEnabled: true,
      },
    },
  },
  // 配置 webpack-dev-server 行为
  devServer: {
    overlay: {
      // 让浏览器 overlay 同时显示警告和错误
      warnings: true,
      errors: true,
    },
    host: "0.0.0.0",
    port: 1314, // 端口号
    https: false, // https:{type:Boolean}
    open: false, // 编译后默认打开浏览器
    hotOnly: true, // 热更新
    proxy: {
      //配置多个跨域
      "/api": {
        target: "http://197.0.0.1:8088",
        changeOrigin: true,
        ws: true, //websocket支持
        secure: false,
        pathRewrite: {
          "^/api": "/",
        },
      },
    },
  },
};
